<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="余额提现"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group class="g-mt--10">
      <van-cell
        :title="bank"
        value-class="g-c--gray"
        :value="bankcard"
        icon="idcard"
        is-link
      />
    </van-cell-group>
    <van-panel class="g-mt--10" title="提现金额">
      <van-cell-group>
        <van-field label="￥" v-model="amount" error />
        <van-cell
          :title="`余额 ${balance} 元`"
          title-class="g-c--gray"
          value="全部提现"
          value-class="g-c--red"
          is-link
          @click="withdrawalBalance"
        >
          <van-icon slot="right-icon" name="balance-o" />
        </van-cell>
      </van-cell-group>
      <div slot="footer">
        <van-button size="large" @click="doWithdraw" type="danger"
          >确认提现</van-button
        >
      </div>
    </van-panel>
  </div>
</template>
<script>
import { NavBar, Cell, CellGroup, Panel, Field, Icon, Button } from "vant";
import { userModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();
export default {
  name: "withdrawal",
  data() {
    return {
      amount: "",
      balance: "",
      bank: "",
      bankcard: ""
    };
  },
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-field": Field,
    "van-icon": Icon,
    "van-button": Button
  },
  created() {
    this.getWithdrawInfo();
  },
  methods: {
    /* 获取提现信息 */
    getWithdrawInfo() {
      userModel._getWithdrawInfo().then(res => {
        this.balance = res.balance;
        this.bank = res.bank;
        this.bankcard = res.bankcard;
      });
    },
    /* 提现接口 */
    doWithdraw() {
      const formData = {
        amount: this.amount,
        bank: this.bank,
        bankcard: this.bankcard
      };
      if (!tool.formDataCheck(formData)) {
        this.$toast({ type: "fail", message: "必填项为空！", duration: 1500 });
        return;
      }
      if (!tool.checkStr(this.amount, "money")) {
        this.$toast({ type: "fail", message: "金额格式错误", duration: 1500 });
        return;
      }
      if (this.amount <= 0) {
        this.$toast.fail({ message: "金额需大于零", duration: 1500 });
        return;
      }
      userModel._doWithdraw(formData).then(res => {
        util._done({ res, to: "/user_center/balance_details" });
      });
    },
    /* 全部提现 */
    withdrawalBalance() {
      this.amount = this.balance;
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
